<template>
  <div class="el-page el-main el-position">
    <div class="search-box" id="search-box">
      <div class="search-card">
        <div class="input-box">
          <div class="searchCard">
            <span class="searchText">作物类型：</span>
            <el-select class="shadowInput" size="mini" clearable v-model="form.cropType" placeholder="请选择作物类型">
              <el-option v-for="item in cropinfoList" :key="item.value" :label="item.label" :value="item.label">
              </el-option>
            </el-select>
          </div>
          <div class="searchCard">
            <span class="searchText">状态：</span>
            <el-select class="shadowInput" size="mini" clearable v-model="form.status" placeholder="请选择状态">
              <el-option v-for="item in statusList" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </div>
        </div>
        <div class="button-box">
          <el-button class="search" @click="getList">搜索</el-button>
          <el-button class="clear" @click="handleReset">清除</el-button>
        </div>
      </div>
    </div>
    <el-divider></el-divider>
    <div class="operate-box">
      <div class="button-box"></div>
      <div>
        <el-tooltip class="item" effect="dark" content="刷新" placement="top">
          <el-button class="circleButtom" size="mini" icon="el-icon-refresh" circle @click="getList"></el-button>
        </el-tooltip>
        <el-tooltip class="item" effect="dark" content="显隐列" placement="top">
          <el-button class="circleButtom" size="mini" icon="el-icon-menu" circle
            @click="handleShowTransfer"></el-button>
        </el-tooltip>
      </div>
    </div>
    <div class="table-box">
      <TableCom ref="tableCom" :tableHead="tableHead" :tableData="tableData" :tableOperate="tableOperate"
        :delList.sync="delList" :showSelect="false">
      </TableCom>
    </div>
    <div class="page-box">
      <PageCom :page="pageData.current" :size="pageData.size" :total="total" @handleSize="handleSize"
        @handleCurrent="handleCurrent"></PageCom>
    </div>
    <!-- 显隐列 -->
    <TransferCom :showDialog.sync="showTransferDialog" :list.sync="tableHead"></TransferCom>
    <!-- 查看弹框 -->
    <ViewPopu ref="ViewPopu" :showDialog.sync="showViewDialog" @handleRefresh="getList"></ViewPopu>
  </div>
</template>

<script>
import { tableApi } from '@/api/limit'
import { cropinfoSelectApi, selectApi } from '@/api/select'
import TableCom from '@/components/TableCom'
import PageCom from '@/components/PageCom'
import TransferCom from '@/components/TransferCom'
import ViewPopu from './dialog/ViewDialog.vue'
export default {
  components: {
    TableCom,
    PageCom,
    TransferCom,
    ViewPopu
  },
  data() {
    return {
      form: {
        cropType: '',
        status: ''
      },
      pageData: {
        current: 1,
        size: 10
      },
      total: 0,
      tableHead: [{
        title: '状态',
        prop: 'status'
      }, {
        title: '粮食种类',
        prop: 'cropType'
      }, {
        title: '年份',
        prop: 'year'
      }, {
        title: '上报人',
        prop: 'createUser'
      }, {
        title: '上报时间',
        prop: 'createTime'
      }],
      tableData: [],
      tableOperate: [{
        title: '查看',
        handle: (row) => {
          this.$refs.ViewPopu.handleGetList(row.id)
          this.$refs.ViewPopu.title = '查看'
          this.$refs.ViewPopu.row = row
          this.showViewDialog = true
        },
        flag: (row) => {
          if (row.status != '待审核') {
            return true
          } else {
            return false
          }
        }
      }, {
        title: '审批',
        handle: (row) => {
          this.$refs.ViewPopu.handleGetList(row.id)
          this.$refs.ViewPopu.title = '审批'
          this.$refs.ViewPopu.row = row
          this.showViewDialog = true
        },
        flag: (row) => {
          if (row.status == '待审核') {
            return true
          } else {
            return false
          }
        }
      }],
      cropinfoList: [],
      statusList: [],
      showViewDialog: false,
      delList: [],
      showTransferDialog: false,
    }
  },
  methods: {
    // 获取下拉框
    async handleGetSelect() {
      Promise.all([
        cropinfoSelectApi(),
        selectApi({ type: 'lines_status' })
      ]).then(res => {
        this.cropinfoList = res[0].data
        this.statusList = res[1].data.dictItemList
      })
    },
    // 重置
    handleReset() {
      this.form = {
        carName: '',
        carType: '',
        createUser: '',
        startTime: '',
        endTime: '',
      }
      this.timeList = []
    },
    // 获取表格
    async getList() {
      const { data } = await tableApi(this.form, this.pageData)
      this.total = data.total
      this.tableData = data.records
    },
    // 分页
    handleSize(size) {
      this.pageData.current = 1
      this.pageData.size = size
      this.getList()
    },
    handleCurrent(current) {
      this.pageData.current = current
      this.getList()
    },
    // 显隐列弹框
    handleShowTransfer() {
      this.showTransferDialog = true
    },
  },
  mounted() {
    this.handleGetSelect()
    this.getList()
  }
}
</script>

<style lang='scss' scoped>
.el-page {
  width: 100%;
  height: calc(100vh - 70px);

  .search-box {
    height: 40px;
    transition: height 0.3s ease;
    overflow: hidden;

    .search-card {
      width: 90%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: relative;

      .arrow {
        cursor: pointer;
        display: inline-block;
        position: absolute;
        right: -100px;
        font-size: 30px;
        transition: transform 0.3s ease;
      }

      .arrow.down {
        transform: rotate(90deg);
      }
    }

    .input-box {
      display: flex;
      align-items: center;
      margin-bottom: 15px;
      transition: height 0.2s ease-in-out;
    }
  }

  .search-box-height {
    height: 90px;
  }

  .operate-box {
    width: 100%;
    background-color: #f5f7fa;
    padding: 8px 5px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

}
</style>
